<template>
  <view class="main">
    <NavBar title="忘记密码" />
    <div class="cell plr15 ub ub-ac btc">
      <div class="tit">
        企业账号
        <span class="red">*</span>
      </div>
      <input class="ub-f1 tx-r" type="number" :value="orgCode" @input="bindInput($event, 'orgCode')" placeholder="请输入企业账号" />
    </div>
    <div class="cell plr15 ub ub-ac btc">
      <div class="tit">
        用户账号
        <span class="red">*</span>
      </div>
      <input class="ub-f1 tx-r" :value="userAccount" @input="bindInput($event, 'userAccount')" placeholder="请输入用户账号" />
    </div>
    <div class="cell plr15 ub ub-ac btc">
      <div class="tit">
        手机号
        <span class="red">*</span>
      </div>
      <input class="ub-f1 tx-r" type="number" :value="mobile" @input="bindInput($event, 'mobile')" placeholder="请输入手机号" />
    </div>
    <div class="cell plr15 ub ub-ac btc">
      <div class="tit">
        短信验证码
        <span class="red">*</span>
      </div>
      <input class="ub-f1 tx-r brc" type="number" :value="verifyCode" @input="bindInput($event, 'verifyCode')" placeholder="请输入短信验证码" />
      <div v-if="showTime" class="codeBtn">{{count}}秒</div>
      <div v-else class="codeBtn" @click="getCode">获取验证码</div>
    </div>
    <div class="cell plr15 ub ub-ac btc">
      <div class="tit">
        新登录密码
        <span class="red">*</span>
      </div>
      <input class="ub-f1 tx-r" type="password" :value="password" @input="bindInput($event, 'password')" placeholder="请输入新登录密码" />
    </div>
    <div class="cell plr15 ub ub-ac btc">
      <div class="tit">
        确认登录密码
        <span class="red">*</span>
      </div>
      <input class="ub-f1 tx-r" type="password" :value="repassword" @input="bindInput($event, 'repassword')" placeholder="请再次输入新登录密码" />
    </div>
    <div class="tips">提示：密码为不少于6位的数字、字母或两者的组合</div>
    <div class="btn-area">
      <button form-type="submit" type="primary" role="button" aria-disabled="false" @click="submit">确 定</button>
    </div>
  </view>
</template>
<script>
import service from '@/utils/http'
import constant from '@/utils/constant'
import { errDialog, loading, checkMobile } from '@/utils/util'
export default {
    datareturn () {
        return {
            orgCode: '',
            userAccount: '',
            mobile: '',
            verifyCode: '',
            password: '',
            repassword: '',
            timer: null,
            showTime: false,
            count: 60
        }
    },
    methods: {
        bindInput(e, param) {
            this[param] = e.detail.value
        },
        submit() {
            if (this.orgCode == "") {
                return errDialog('企业账号不能为空！')
            }
            if (this.userAccount == "") {
                return errDialog('用户账号不能为空！')
            }
            if (this.mobile == "") {
                return errDialog('手机号不能为空！')
            }
            if (!checkMobile(this.mobile)) {
                return errDialog('手机号格式不正确！')
            }
            if (this.password == "") {
                return errDialog('新登录密码不能为空！')
            }
            if (this.repassword == "") {
                return errDialog('确认密码不能为空！')
            }
            if (this.password.length < 6) {
                return errDialog('密码不能少于于6位！')
            }
            if (this.password !== this.repassword) {
                return errDialog('两次密码输入不一致！')
            }
            this.save()
        },
        showRestTime() {
            if (!this.timer) {
                this.count = 59;
                this.showTime = true
                this.timer = setInterval(() => {
                    if (this.count > 1 && this.count <= 60) {
                        const count = this.count - 1
                        this.count = count
                    } else {
                        this.showTime = false
                        clearInterval(this.timer);
                        this.timer = null
                    }
                }, 1000)
            }
        },
        switchChange (e) {
            this.isCurrent = e.target.value 
        },
        getCode() {
            if (this.orgCode == "") {
                return errDialog('企业账号不能为空！')
            }
            if (this.mobile == "") {
                return errDialog('手机号不能为空！');
            }
            if (!checkMobile(this.mobile)) {
                return errDialog('手机号格式不正确！');
            }
            const { orgCode, mobile, userAccount } = this
            service.post('/app/forgotSentVerifyCode', { orgCode, mobile, userAccount }).then(res => {
                uni.showToast({
                    title: '发送成功',
                    icon: 'success'
                })
                this.showRestTime()
            })
        },
        save() {
            const { orgCode, mobile, userAccount, verifyCode, password } = this
            service.post('/app/forgotPSWSave', { orgCode, mobile, userAccount, verifyCode, password }).then(res => {
                uni.showToast({
                    title: '密码找回成功',
                    icon: 'success'
                })
                setTimeout(() => {
                    uni.navigateBack()
                }, 1200)
            })
        }
    }
}
</script>
<style>
.cell {
    height: 100rpx;
    background: #fff;
}

.tit {
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
}

.cell input {
    font-size: 28rpx;
    color: #333;
}

label {
    font-size: 26rpx;
    color: #333;
}
.arrow-right{display: inline-block;}
.brc{border-right: 2rpx #eee solid;padding-right: 10rpx;}
.codeBtn {
    width: 150rpx;
    color: #333;
    font-size: 24rpx;
    text-align: center;
    padding: 6rpx 12rpx;
    background-color: #e2e2e2;
    border-radius: 6rpx;
    margin-left: 12rpx;
}
.tips {
    padding-left: 30rpx;
    color: #666;
    font-size: 24rpx;
    margin-top: 10rpx
}
</style>